<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="person-infor">
      <div class="person-black" v-if="user.backgroundImage == null">
        <div class="person-bgImg">
          <img src="../assets/imgs/bgdefault.png" alt="" />
        </div>
        <div class="bgShadow"></div>
        <div class="tags">
          <div class="person-tag">
            <div class="person-title">关注</div>
            <div class="person-num">{{ user.followCount }}</div>
          </div>
          <div class="person-tag fan">
            <div class="person-title">粉丝</div>
            <div class="person-num">{{ user.fansCount }}</div>
          </div>
          <div class="person-tag getFavor">
            <div class="person-title">获赞</div>
            <div class="person-num">{{ user.pointCount }}</div>
          </div>
        </div>
      </div>
      <div class="person-black" v-else>
        <div class="person-bgImg">
          <img :src="user.backgroundImage" alt="" />
        </div>
        <div class="bgShadow"></div>
        <div class="tags">
          <div class="person-tag">
            <div class="person-title">关注</div>
            <div class="person-num">{{ user.followCount }}</div>
          </div>
          <div class="person-tag fan">
            <div class="person-title">粉丝</div>
            <div class="person-num">{{ user.fansCount }}</div>
          </div>
          <div class="person-tag getFavor">
            <div class="person-title">获赞</div>
            <div class="person-num">{{ user.pointCount }}</div>
          </div>
        </div>
      </div>

      <div class="person-white">
        <div class="person-header">
          <img :src="user.headImage" alt />
        </div>
        <div class="person-name">{{ user.nickName }}</div>
        <div class="person-introduce">{{ user.introduce }}</div>
        <div
          class="concern"
          v-if="user.isFollow == 0"
          @click="concern(user.userId)"
        >
          关注
        </div>
        <div class="concern disable" v-else @click="concern(user.userId)">
          已关注
        </div>
      </div>
    </div>
    <div class="infor-content" v-show="ctnIndex == 0">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right" v-loading="loading">
        <div class="account">
          全部关注
          <span class="favor-num">{{ count }}</span>
        </div>
        <div class="fansCtn" v-if="res.articleShow">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="fansHeader">
              <div class="article-header" @click="goUp(item.userId)">
                <img :src="item.headImage" alt />
              </div>
              <div class="fansIcon" v-if="item.identity == 1">
                <img src="../assets/imgs/xhv.png" alt="" />
              </div>
              <div class="fansIcon" v-if="item.identity == 2">
                <img src="../assets/imgs/xlv.png" alt="" />
              </div>
              <div class="fansIcon" v-if="item.identity == 3">
                <img src="../assets/imgs/green.png" alt="" />
              </div>
            </div>
            <div class="article-name">
              <span>{{ item.nickName }}</span>
            </div>
            <div class="fansIntro">
              {{ item.introduce }}
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>
    <div class="infor-content" v-show="ctnIndex == 1">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right" v-loading="loading">
        <div class="account">
          全部粉丝
          <span class="favor-num">{{ count }}</span>
        </div>
        <div class="fansCtn" v-if="res.articleShow">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="fansHeader">
              <div class="article-header" @click="goUp(item.userId)">
                <img :src="item.headImage" alt />
              </div>
              <div class="fansIcon" v-if="item.identity == 1">
                <img src="../assets/imgs/xhv.png" alt="" />
              </div>
              <div class="fansIcon" v-if="item.identity == 2">
                <img src="../assets/imgs/xlv.png" alt="" />
              </div>
              <div class="fansIcon" v-if="item.identity == 3">
                <img src="../assets/imgs/green.png" alt="" />
              </div>
            </div>
            <div class="article-name">
              <span>{{ item.nickName }}</span>
            </div>
            <div class="fansIntro">
              {{ item.introduce }}
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>

    <div class="paging" v-if="res.articleShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="3"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <nav-footer ref="child"></nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";

export default {
  data() {
    return {
      tags: [{ name: "TA的关注" }, { name: "TA的粉丝" }],
      defaultIndex: 0,
      ctnIndex: 0,
      list: [],
      test: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      user: "",
      artList: [],
      loading: true,
      id: 0,
      res: "",
      count: 0,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    //获取用户信息
    this.id = this.$route.query.id;
    this.$fetch(`/laiwen/user/frontend/otheruser?userId=${this.id}`, {}).then(
      (res) => {
        console.log(res);
        this.user = res.user;
      }
    );
    //判断从up页点进来的侧边栏
    if (this.$route.query.index == 1) {
      this.defaultIndex = this.$route.query.index * 1;
      this.init(`/follow/frontend/fanslist`, "list", 1);
    } else {
      this.init(`/follow/frontend/followlist`, "list", 1);
    }
  },
  methods: {
    init(url, listName, page) {
      this.loading = true;
      this.$fetch(
        `/laiwen/${url}?page=${page}&limit=3&userId=${this.id}`,
        {}
      ).then((res) => {
        this.loading = false;
        this.totalPage = res.totalPages * 1;
        this.count = res.count * 1;
        this.res = res;
        this.$set(res, "articleShow", true);
        this.artList = res[listName];
        //list为空的样式处理
        if (this.artList.length == 0) {
          this.$set(res, "articleShow", false);
        }
      });
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
      this.isSpecial = true;
      console.log(this.ctnIndex);
      if (e == 0) {
        this.init(`/follow/frontend/followlist`, "list", 1);
      }
      if (e == 1) {
        this.init(`/follow/frontend/fanslist`, "list", 1);
      }
    },

    //关注操作
    concern(id) {
      let that = this;
      if (!that.isConcern(id)) {
        return false;
      }
      that
        .$post(`/laiwen/follow/frontend/save?getFollowId=${id}`, {})
        .then((res) => {
          if (that.user.isFollow == 0) {
            this.$message({
              message: "亲亲关注成功哦",
              type: "success",
            });
            that.user.isFollow = 1;
          } else {
            this.$message({
              message: "亲亲取消关注了",
              type: "warning",
            });
            that.user.isFollow = 0;
          }
        });
    },
    //分页方法
    changePage(size) {
      if (this.ctnIndex == 0) {
        this.init(`/follow/frontend/followlist`, "list", size);
      } else if (this.ctnIndex == 1) {
        this.init(`/follow/frontend/fanslist`, "list", size);
      }
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },
    jumpPage(path, id) {
      this.navigate(path, id);
    },
    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/fans.css"></style>
